import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Carousel } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../../assets/iconfont/iconfont.css';

// widget 
import Loading from '../../../Common/Loading';

class ProductionInfo extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    
	render() {
		const { meyley } = this.props

		const promotePrice = meyley.productionDetail && meyley.productionDetail.promotePrice
		const shopPrice = meyley.productionDetail && meyley.productionDetail.shopPrice
		const marketPrice = meyley.productionDetail && meyley.productionDetail.marketPrice

	 	return (
	 		<div className="production-info">
	 			<div className={styles['production-info-image']}>
	 				{
	 					meyley.productionDetail ? (
	 						<Carousel
	 							initialSlideHeight={400}
	 							autoplay={false} 
	 							infinite
						        className={styles['production-info-image-carousel']} 
						    >
						    	{
						    		meyley.productionDetail && meyley.productionDetail.goodsImg 
			 						&& meyley.productionDetail.goodsImg.map((img, k) => {
			 							return  <a href="#" key={k}><img style={{width: '80%', height: '4.00rem'}} src={img.thumbUrl} /></a>
			 						})
						    	}
					      	</Carousel>) : (<Loading />)
	 				}
	 				
	 			</div>
	 			<div className={styles['production-info-detail']}>
	 				<div className={styles['production-info-detail-title']}>{meyley.productionDetail && meyley.productionDetail.goodsName}</div>
	 				<div className={styles['production-info-detail-des']}>{meyley.productionDetail && meyley.productionDetail.goodsBrief}</div>
	 				<div className={styles['production-info-detail-price']}>
	 					<span>促销价：<span style={{color: 'rgb(255, 0, 81)', fontSize: '0.28rem'}} >￥{promotePrice || shopPrice || marketPrice}</span></span>
	 					<span style={{textDecoration: 'line-through', marginLeft: '0.24rem'}}>￥{shopPrice}</span>
	 					<span style={{float: 'right', position: 'relative', top: '0.08rem'}}>专柜价: ￥{marketPrice}</span>
	 				</div>
	 			</div>
	 		</div>
	  	);
	}
};

ProductionInfo.propTypes = {
};

export default ProductionInfo
